﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script src="../../Scripts/lib/jquery-1.6.2.min.js" type="text/javascript"></script>

    <script src="../../Scripts/lib/jquery.json.min.js" type="text/javascript"></script>

    <script src="../../Scripts/lib/jquery.bindTools.js" type="text/javascript"></script>

    <link href="../sample.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" language="javascript">
        var datas = [];
        for (var i = 0; i < 10; i++) {
            datas.push({
                "sex": i % 2 == 0 ? "female" : "male",
                "name": "name" + i,
                "phone": "phone" + i
            });
        }


        $(document).ready(function() {
            $("#demo1").bindTool(
                {
                    template: $('<tr id="template"><td><a class="getJsonObject" href="###">GetCurrentJson</a></td><td></td><td></td><td><td></tr>'),
                    way: [
                        { member: "sex", to: "td:eq(2)" },
                        { member: "phone", to: "td:eq(3)" },
                        { member: "name", to: "td:eq(1)" }
                    ]
                }
            );
            $("#demo1").bindTool('bind', datas);

            $(".getJsonObject").live("click", function() {
                var jsion = $("#demo1").bindTool("collect", $(this).parent().parent());
                alert($.toJSON(jsion));
            });

        });
    </script>

    <style type="text/css">
        #data
        {
            width: 368px;
        }
    </style>
</head>
<body>
    <table id="demo1" style="float: left; width: 464px">
        <thead>
            <tr>
                <td>
                </td>
                <td>
                    name
                </td>
                <td>
                    sex
                </td>
                <td>
                    phone
                </td>
            </tr>
        </thead>
    </table>
    <div style="width: 378px">
        &nbsp;
    </div>
</body>
</html>
